import { getGoodsList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, View } from 'react-native';

interface GoodsItem {
  id: number;
  price: number;
  name: string;
  picture: string;
}
export default function GoodsProduct() {
  // [list是状态变量,setList是修改状态变量的方法]
  const [list, setList] = useState<GoodsItem[]>([]);
  // 获取商品列表数据
  const loadGetGoodsList = async () => {
    const result = await getGoodsList();
    console.log('getGoodsList----->15', result);
    setList(result.data.rows);
  };
  // 副作用来实现触发异步请求
  useEffect(() => {
    loadGetGoodsList();
  }, []);
  return (
    <View style={styles.goodsProduct}>
      <View style={styles.goodsProduct_box}>
        {list.map((item) => {
          return (
            <View style={styles.goodsProductList} key={item.id}>
              <Image style={styles.img} source={{ uri: item.picture }}></Image>
              <View>{item.name}</View>
              <View>￥{item.price}</View>
            </View>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  goodsProduct: {
    padding: 8,
    backgroundColor: '#f9f6f0',
  },
  goodsProduct_box: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  goodsProductList: {
    backgroundColor: '#00ffff',
    width: '48%',
    textAlign: 'center',
    marginRight: 5,
  },
  img: {
    margin: 'auto',
    width: 150,
    height: 150,
  },
});
